<template>
	<view class="page_all" style="background-color:#1485FF;">
		
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_bigMiddle"></view>
			</view>
		</view>
		<view class="page_contentArea">
			<view class="line2" style="margin-top: 50rpx;">用户注册</view>
			<view class="line3">
				<!--控件行-->
				<view class="line3_input_row" style="margin-top: 50rpx;">
					<uni-easyinput v-model="form.nickName" :styles="styles" :placeholderStyle="placeholderStyle"
											   placeholder="输入姓名"></uni-easyinput>
				</view>
				<view class="line3_input_row" style="margin-top: 50rpx;" @click="showSex=true;hideKeyboard()" v-if="false">
					<uni-easyinput v-model="form.sex" :styles="styles" :placeholderStyle="placeholderStyle" disabled
						             placeholder="选择性别" suffixIcon="bottom"></uni-easyinput>
				</view>
				<view class="line3_input_row" style="margin-top: 50rpx;">
					<uni-easyinput v-model="form.phonenumber" :styles="styles" :placeholderStyle="placeholderStyle"
												 placeholder="输入手机号"></uni-easyinput>
				</view>
				<view class="line3_msg_row" style="margin-top: 50rpx;">
					<view class="line3_msg_row_L"> <!--如果采用屏蔽验证码逻辑需要加一个disabled属性-->
						<uni-easyinput v-model="form.verifyCode" :styles="styles" :placeholderStyle="placeholderStyle"
													 placeholder="验证码"></uni-easyinput>
					</view>
					<view class="line3_msg_row_R">
						<!-- <view class="line3_msg_row_R_btn btn_notClick">获取验证码</view> --> <!--如果采用屏蔽验证码逻辑需要注掉32与33行，并放开本行-->
						<view v-if="btn_code==0" class="line3_msg_row_R_btn btn_notClick">{{tips}}</view>
						<view v-else class="line3_msg_row_R_btn" @click="getCode()">获取验证码</view>
					</view>
				</view>
				<!--按钮行-->
				<view class="line3_btn_row" style="margin-top: 100rpx;">
					<view class="line3_btn_small" @click="submit()">注<span style="padding: 30rpx;"></span>册</view>
					<span style="padding: 30rpx;"></span>
					<view class="line3_btn_small" @click="exitMP()">取<span style="padding: 30rpx;"></span>消</view> 
				</view>
				
			</view>
		</view>
		
		<u-picker :show="showSex" :columns="sexColumns" title="请选择性别"
							@cancel="sexCancel"
							@confirm="sexConfirm">
		</u-picker>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				//控件的样式
				placeholderStyle: "color:#C2C2C2;font-size:38rpx",
				styles: {
					disableColor: '#FFF',
					borderColor: '#E8E8E8', //文本框边框颜色
				},
				//表单参数
				form: {
					nickName: '',
					sex: '',
					birthday: '1949-10-01 00:00:00',
					birthdayShow: '1949-10',
					phonenumber: '',
					verifyCode: '', //如果采用屏蔽验证码逻辑需要将默认值置为111111
					userName:'',  //oXVE246VlihlC0fuSLbFJgC99zCY (赋值unionid)
					openId:'',
					unionId:''
				},
				showSex: false,//用于控制性别选择器 
				sexColumns: [
				  ['男', '女']
				],
				
				//验证码按钮控制
				btn_code: 1 , //0表示置灰不可用  ，1表示可以点击 （如果采用屏蔽验证码逻辑需要将默认值置为0）
				tips: '获取验证码', //用于控制“获取验证码”按钮上显示的文字
				num:60, //倒计时定时器
				isCloseNum:false , //用于强行关闭定时器（当倒计时未结束时，点击提交按钮，需要将这个变量置为true）
				
				//在此之上补充变量
			}
		},
		onLoad() {
			
		},
		methods: {
			/**********************下拉框相关方法***********************/
			//隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			//性别下拉
			sexConfirm(e) {
				//console.log('sexConfirm', e);
				this.form.sex=e.value[0];
				this.showSex = false;
			},
			sexCancel() {
				//console.log('sexCancel');
				this.showSex = false;
			},
			
			/*******************以下是获取验证码相关**********************/
			//用于控制“获取验证码”按钮上显示的文字
			//倒计时
			countdown() { 
				this.num=60;
				var int=setInterval(()=>{
					if(this.num>0){
						if(this.isCloseNum){
							clearInterval(int);
						}
						this.num--;
						this.tips=this.num+"秒后获取";
					}else{
						clearInterval(int);
						this.btn_code=1;//置为可用
					}
				},1000);
			},
			//获取验证码方法
			getCode() {
				var that=this; 
				//1：校验电话
				var mobile=this.form.phonenumber; //获取输入的电话号码
				var reg_tel=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/; //手机校验规则 
				console.log("此时的电话号码==",mobile);
				if(mobile=="" || !reg_tel.test(mobile)){
					uni.showToast({
						title: "请正确填写电话！",
						icon: 'error'
					});
					return;
				}else{
					//2：先置灰，不改变按钮文字
					this.btn_code=0;
					//3:后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
					})
					utils.getVerifyCode(mobile).then(res => {
						console.log('getVerifyCode接口返回值==',res); 
						if(res.data.code==200){
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title:'验证码已发送',
									icon: 'success'
								});
							}, 1000);
							//4：获取成功后，启动定时器
							that.countdown();
						}
						if(res.data.code==500){
							let msg=res.data.msg;
							uni.navigateTo({
								url:'../error/error?errorMsg='+msg 
							})
						}
					}).catch(error => {
						uni.navigateTo({
							url:'../error/error?errorMsg='+error
						}) 
					})
					
				}//if else结束
			},
			
			//主提交函数
			submit() {
				let that=this;
				console.log('进入提交方法'); 
				//验证4个控件	//newValue.nickName && newValue.phonenumber && newValue.verifyCode
				if(that.form.nickName.trim()==""){
					uni.showToast({
						title: "请填写姓名！",
						icon: 'error'
					});
					//uni.$u.toast('校验失败');
					return;
				}
				// if(that.form.sex==""){
				// 	uni.showToast({
				// 		title: "请选择性别！",
				// 		icon: 'error'
				// 	});
				// 	return;
				// }
				var mobile=that.form.phonenumber.trim(); //获取输入的电话号码
				var reg_tel=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/; //手机校验规则 
				console.log("此时的电话号码==",mobile);
				if(mobile=="" || !reg_tel.test(mobile)){
					uni.showToast({
						title: "请正确填写电话！",
						icon: 'error'
					});
					return;
				}
				
				//如果不要验证码逻辑，需要把下面206-212行注掉
				if(that.form.verifyCode.trim()==""){
					uni.showToast({
						title: "请填写验证码！",
						icon: 'error'
					});
					return;
				}
				
				//补齐临时去掉的原注册项属性
				// that.form.nickName=mobile; //姓名赋值电话
				that.form.sex="男"; //性别赋值男
				
				that.form.verifyCode=that.form.verifyCode.trim(); //如果采用屏蔽验证码逻辑需要将值置为111111
				
				//补齐表单属性
				that.form.birthday="1949-10-01 00:00:00";//补齐相关的属性值
				that.form.userName=getApp().globalData.unionid;
				that.form.openId=getApp().globalData.openid;
				that.form.unionId=getApp().globalData.unionid;
				console.log("提交的表单==",that.form);
				utils.registerByMobile(that.form).then(res => {
					console.log('注册registerByMobile接口返回值==',res);  
					if(res.data.code==200){
							uni.showToast({ 
								title:'注册成功！',
								icon: 'success',
								duration: 1500
							});
							setTimeout(() => {
								uni.redirectTo({
									url:"../init/init" ,
								});
							}, 1500); //显示toast 1.5秒钟之后执行
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
			},
			
			//退出小程序
			//退出登录
			exitMP(){
				uni.showModal({
					title: '提示',
					content: '确定取消并退出小程序？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							uni.exitMiniProgram({
								success: function() {
									console.log('退出小程序成功');
								},
								fail: function(err) {
									console.log('退出小程序失败', err);
									uni.navigateTo({
										url:'../error/error?errorMsg='+err.errMsg
									})
								}
							}) //退出函数结束
						}
					}
				})
				//uni.showModal结束
			},
			
			//在此之上补充方法
		}
	}
</script>

<style lang="scss">
/*注册页面样式*/
.page_all{
	width: 750rpx;
	height: 100vh;
	background-color: #FFFFFF; /*背景颜色根据实际情况调整*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
/*title区域*/
.page_titleArea{ 
	width: 750rpx;
	height: 180rpx;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-shrink: 0; /*表示不可被压缩*/
	background-color: #1485FF;
}
.page_title_line{ /*用于放置返回按钮或是其他图标，title标题*/
	width: 750rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_left{
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_middle{
	width: 550rpx;
	height: 100rpx;
	color: #fff;
	font-size: 32rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
}
.page_title_line_bigMiddle{
	width: 680rpx;
	height: 100rpx;
	color: #fff;
	font-size: 39rpx;
	line-height: 100rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: bold;
}
/*content区域*/
.page_contentArea{
	width: 750rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-grow: 1; /*表示占用title区域外的所有*/
	overflow-y: auto;
	/* border-bottom: 1rpx #AEAEAE solid; */ /*下边框样式*/
}

.line1{ /*图标容器与图标大小（暂未用到）*/
	width: 280rpx;
	height: 230rpx;
}
.line2{ /*图标下的文字*/
	width: 650rpx;
	height: 65rpx;
	color: #fff;
	font-size: 56rpx;
	line-height: 65rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 900;
}
.line3{ /*注册信息表单区域*/
	width: 700rpx;
	height: 750rpx; /*没有隐藏姓名性别前是900rpx，去掉姓名与性别是600rpx*/
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 50rpx;
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.line3_input_row{ /*表单行*/
	width: 650rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.line3_msg_row{ /*用于验证码行*/
	width: 650rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.line3_msg_row_L{ /*验证码输入框*/
	width: 300rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.line3_msg_row_R{ /*取验证码按钮容器*/
	width: 350rpx;
	height: 100rpx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.line3_msg_row_R_btn{ /*取验证码按钮*/
	width: 330rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #20B2AA;
	border-radius: 20rpx;
	color: #ffffff;
	font-size: 38rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 600;
}
.line3_btn_row{ /*按钮行*/
	width: 550rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.line3_btn{ /*按钮*/
	width: 550rpx;
	height: 100rpx;
	background: #1485FF;
	border-radius: 100rpx;
	color: #FFFFFF;
	font-size: 48rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 600;
	margin-top: 70rpx;
}
.line3_btn_small{ /*按钮*/
	width: 250rpx;
	height: 100rpx;
	background: #1485FF;
	border-radius: 50rpx;
	color: #FFFFFF;
	font-size: 48rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 600;
	margin-top: 70rpx;
}
.btn_notClick{ /*按钮置灰*/
	//background-color: #808080;
	filter: grayscale(1);
}
</style>
